﻿@using Abp.Organizations
@{
    Layout = "~/Views/Shared/_TestLayout.cshtml";
}
@section headSec{
<link href="/Content/Hplus-v.4.1.0/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="/Content/treeview/css/bootstrap-treeview.css" rel="stylesheet">
    <script src="/Content/treeview/bootstrap-treeview.js"></script>
    <script src="/Content/BootstrapMenu/BootstrapMenu.min.js"></script>
<script src="/Content/Hplus-v.4.1.0/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>

    <script>
        var personTb;
        $(document).ready(function(){
            $("#personTb").bootstrapTable({
                search: true,
                pagination: true,
                showRefresh: true,
                showToggle: true,
                showColumns: true,
                iconSize: 'outline',
                toolbar: '#exampleTableEventsToolbar',
                onLoadSuccess: function (data) {
                    alert('load');
                    console.log(data);
                    //$('#personTb').bootstrapTable('load', data.result);
                },
                onLoadError: function (status) {
                    alert("error");
                    console.log(status);
                },
                icons: {
                    refresh: 'glyphicon-repeat',
                    toggle: 'glyphicon-list-alt',
                    columns: 'glyphicon-list'
                }
            });
            $('#treeview2').treeview({
                levels: 1,
                onNodeSelected: function(event, node) {
                    $("#pHead").text('成员：' + node.text);
                    $("#btnShow").data('hid', node.id);
                    alert(node.text + ' was selected id:' + node.id);
                    $("#personTb").bootstrapTable('refresh', { url: "/TestOrganization/OuPersonList/" + node.id });
                },
                data: eval(@Html.Raw(ViewBag.ou))
            });
            var menu = new BootstrapMenu('.list-group-item', {
              /* a function to know which row was the context menu opened on,
               * given the selected DOM element. When this function is defined,
               * every user-defined action callback receives its return value as
               * an argument. */
              fetchElementData: function($rowElem) {
                var rowId = $rowElem.data('nodeid');
                return rowId;
              },
              actions: [{
                name: '修改',
                onClick: function (row) {
                    console.log("rightonClick");
                    var node = $('#treeview2').treeview('getNode', row);
                    console.log(node);
                    alert("'Edit name' clicked on '" + node.text + "'");
                }
              }, {
                name: '添加子单元',
                onClick: function (row) {
                    var node = $('#treeview2').treeview('getNode', row);
                    alert("'Edit name' clicked on '" + node.text + "'");
                }
              }, {
                  name: '添加成员',
                  onClick: function (row) {
                      var node = $('#treeview2').treeview('getNode', row);
                      alert("'Edit name' clicked on '" + node.text + "'");
                  }
              }, {
                  name: '删除',
                  onClick: function (row) {
                      var node = $('#treeview2').treeview('getNode', row);
                      alert("'Edit name' clicked on '" + node.text + "'");
                  }
              }]
            });

        });
        function showAddDlg() {
            layer.open({
            type:2,
            title:'新建组织',
            content:'/TestOrganization/Add',
            btn: ['保存', '取消'],
            yes: function (index, layero) {
                var name = window[layero.find('iframe')[0]['name']].DialogResult();
                $.ajax({
                    type: "post",
                    url: '/TestOrganization/Add',
                    data: { 'DisplayName': name,'__RequestVerificationToken':  $('@Html.AntiForgeryToken()').val() },
                    dataType: "json",
                    success: function (data) {
        console.log(data);
                        if (data.result.errcode == 0) {
                            alert("添加成功");
                            layer.close(index);
                            location.reload();
                        } else {
                            alert(data.result.errmsg);
                        }
                    }
                });
            }

        });
        }

        function showAddPersonDlg() {
            if ($("#btnShow").data('hid') == "") {
                alert("请选择组织");
                return;
            }
            layer.open({
                type: 2,
                area: ['960px','500px'],
                title:'选择一项',
                content:'/TestOrganization/PersonList',
                btn: ['选择', '取消'],
                yes: function (index, layero) {
                    var result = window[layero.find('iframe')[0]['name']].DialogResult();
                    if (result.lenth == 0) {
                        alert("请选择用户");
                        return;
                    }
                    $.ajax({
                        type: "post",
                        url: '/TestOrganization/SetOu',
                        data: { 'id': result[0].Id, 'ouId': $("#btnShow").data('hid'), '__RequestVerificationToken':  $('@Html.AntiForgeryToken()').val() },
                        dataType: "json",
                        success: function (data) {
            console.log(data);
                            if (data.result.errcode == 0) {
                                alert("添加成功");
                                layer.close(index);
                                location.reload();
                            } else {
                                alert(data.result.errmsg);
                            }
                        }
                    });
                }

            });
        }
        function deletePerson(id) {
            var head = {};
            head["__RequestVerificationToken"] = $('@Html.AntiForgeryToken()').val();
            $.ajax({
                type: 'post',
                url: '/Test/Delete/' + id,
                headers: head,
                data: { '__RequestVerificationToken':  $('@Html.AntiForgeryToken()').val()},
                success: function (data) {
                    if (data.result.errcode == 0) {
                        alert("删除成功");
                        location.reload();
                    } else {
                        alert("删除失败");
                    }
                }
            })
        }
    </script>
}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>组织关系图</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link" onclick="showAddDlg()">
                            <i class="fa fa-plus"></i>添加单元
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div id="treeview2" class="test"></div>
                </div>
            </div>
        </div>


        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5 id="pHead">成员：</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link" onclick="showAddPersonDlg()" id="btnShow" data-hid="">
                            <i class="fa fa-plus"></i>添加成员
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <table id="personTb" data-height="250" data-mobile-responsive="true">
                        <thead>
                            <tr>
                                <th data-field="Id">ID</th>
                                <th data-field="FullName">姓名</th>
                                <th data-field="EmailAddress">email</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
